<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商平台 - 首页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>电商平台</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="product-list.html">商品列表</a>
            <a href="user.html">用户中心</a>
        </nav>
    </header>

    <main>
        <section class="recommendations">
            <h2>推荐商品</h2>
            <div id="recommend-list">
                <!-- 推荐商品将通过JS动态加载 -->
            </div>
        </section>
    </main>

    <footer>
        <p>© 2025 电商平台</p>
    </footer>

    <script src="api.js"></script>
    <script>
        // 页面加载时获取推荐商品
        document.addEventListener('DOMContentLoaded', function() {
            loadRecommendations();
        });

        function loadRecommendations() {
            // 显示加载状态
            const container = document.getElementById('recommend-list');
            container.innerHTML = '<div class="loading">加载推荐商品中...</div>';

            // 尝试获取用户推荐商品
            const userToken = getAuthToken();
            if (userToken) {
                // 如果用户已登录，获取个性化推荐
                // 这里需要先获取用户信息来得到用户ID
                getUserInfo().then(userInfo => {
                    if (userInfo.data && userInfo.data.id) {
                        return getRecommendationsByUserId(userInfo.data.id);
                    } else {
                        throw new Error('无法获取用户信息');
                    }
                }).then(result => {
                    if (result.data && Array.isArray(result.data)) {
                        renderRecommendations(result.data.slice(0, 6));
                    } else {
                        throw new Error('推荐数据格式错误');
                    }
                }).catch(error => {
                    console.warn('获取个性化推荐失败，使用默认商品列表:', error);
                    loadDefaultProducts();
                });
            } else {
                // 未登录用户显示默认商品列表
                loadDefaultProducts();
            }
        }

        function loadDefaultProducts() {
            // 获取默认商品列表作为推荐
            getProductList(1, 6).then(result => {
                if (result.data && result.data.records && Array.isArray(result.data.records)) {
                    renderRecommendations(result.data.records);
                } else {
                    throw new Error('商品数据格式错误');
                }
            }).catch(error => {
                console.error('获取商品列表失败:', error);
                handleApiError(error);
                // 显示错误信息
                const container = document.getElementById('recommend-list');
                container.innerHTML = '<div class="error-message">加载推荐商品失败，请刷新页面重试</div>';
            });
        }

        function renderRecommendations(products) {
            const container = document.getElementById('recommend-list');

            if (!products || products.length === 0) {
                container.innerHTML = '<div class="no-products">暂无推荐商品</div>';
                return;
            }

            container.innerHTML = products.map(product => `
                <div class="product-card">
                    <div class="product-image-url">
                        <label>图片链接:</label>
                        <p class="image-url">${product.productImg || 'https://via.placeholder.com/300x200'}</p>
                    </div>
                    <h3>${product.productName || '未知商品'}</h3>
                    <p class="price">¥${(product.price || 0).toFixed(2)}</p>
                    <p class="description">${product.productDesc || '暂无描述'}</p>
                    <a href="product-detail.html?id=${product.id}" class="btn-primary">查看详情</a>
                </div>
            `).join('');
        }
    </script>
</body>
</html>